<!DOCTYPE html>

<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no' />
  <title>pyg商品详情</title>
  <link rel="stylesheet" href="./lib/mui/css/mui.css">
  <link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.css">
  <link rel="stylesheet" href="./css/goods_detail.css">
</head>

<body>
  <!-- 头部工具栏 -->
  <header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h4 class="mui-title">商品详情</h4>
  </header>
  <!-- 商品列表 开始 -->
  <div class="pyg_view">

  </div>
  <!-- 商品列表 开始 -->

  <!-- 尾部开始 -->
  <footer class="pyg_buy_bar">
    <a href="javascript:;">
      <i class="fa fa-weixin"></i>
      <div>客服</div>
    </a>
    <a href="javascript:;">
      <i class="fa fa-phone"></i>
      <div>客服</div>
    </a>
    <a href="javascript:;" class="buy_btn mui-btn mui-btn-warning">立即购买</a>
    <a class="add_cart_btn mui-btn mui-btn-danger" href="javascript:;">加入购物车</a>
  </footer>
  <!-- 尾部结束 -->
</body>
<!-- 模板引擎 开始 -->
<script type="text/html" id="mainTpl">
  <!-- 轮播图开始 -->
<div class="mui-slider">
  <!-- 图片 -->
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{pics[pics.length-1].pics_mid_url}}" /></a></div>
    {{each pics item index}}
    <div class="mui-slider-item"><a href="#"><img src="{{item.pics_mid_url}}" /></a></div>
    {{/each}}
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{pics[0].pics_mid_url}}" /></a></div>
  </div>
  <!-- 索引器 -->
  <div class="mui-slider-indicator">
    {{each pics item index}}
    <div class="mui-indicator {{index==0?'mui-active':''}}"></div>
    {{/each}}
  </div>
</div>
<!-- 轮播图结束 -->

<!-- 商品的名称 开始 -->
<div class="goods_name">{{goods_name}}</div>
<!-- 商品的名称 结束 -->

<!-- 价格开始 -->
<div class="goods_price">￥{{goods_price}}</div>
<!-- 价格结束 -->

<!-- 物流信息开始 -->
<ul class="goods_post_charge">
  <li>
    <span>已选</span>
    <span>白色</span>
  </li>
  <li>
    <span>促销</span>
    <span>是</span>
  </li>
  <li>
    <span>送至</span>
    <span>上海市</span>
  </li>
  <li>
    <span>运费</span>
    <span>免运费</span>
  </li>
</ul>
<!-- 物流信息结束 -->

<!-- 商品选项卡 开始 -->
<div class="goods_info"> 
  <!-- 标题 -->
  <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-primary">
    <a class="mui-control-item mui-active" href="#item1">图文详情        </a>
    <a class="mui-control-item" href="#item2">规格参数</a>
  </div> 
  <!-- 内容 -->
<div>
  <div id="item1" class="mui-control-content ">
  {{@goods_introduce}}
  </div>
  <div id="item2" class="mui-control-content mui-active">
    <ul class="mui-table-view">
      {{each attrs item index}}
      <li>
        <div class="i2_title">{{item.attr_name.split("-")[0]}}</div>
        <div class="i2_content">
          <span>{{item.attr_name.split("-")[1]}}</span>
          <span>{{item.attr_value}}</span>
        </div>
      </li>
      {{/each}}
    </ul>
  </div>
 </div>
</div>
<!-- 商品选项卡 结束 -->
</script>
<!-- 模板引擎 结束 -->

<script src="./lib/mui/js/mui.js"></script>
<script src="./lib/arttemplate/template-web.js"></script>
<script src="./lib/zepto/zepto.js"></script>
<script src="./lib/iscroll/iscroll.js"></script>
<script src="./js/common.js"></script>
<script src="./js/goods_detail.js"></script>

</html>